<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8">
    <title>租车订单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="keywords" content="" /> <!-- 关键字 -->
    <meta name="description" content="" /> <!-- 描述 -->
    <!-- 引入css -->
    <link rel="stylesheet" href="./css/ionic-change.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/order.css">
    <link rel="stylesheet" href="./js/tc/weui2.css">

  </head>

  <body style="background:rgba(242,242,242,1);">
    <div class="container">
      <div class="order_main">
        <div class="malllhead_box borbottom">
          <div class="swiper-container swiper1">
            <div class="swiper-wrapper">
              <div class="swiper-slide selected">全部</div>
              <div class="swiper-slide">预约中</div>
              <div class="swiper-slide">待支付</div>
              <div class="swiper-slide">待出发</div>
              <div class="swiper-slide">进行中</div>
              <div class="swiper-slide">已完成</div>
              <div class="swiper-slide">已取消</div>
            </div>
          </div>
        </div>
        <div class="ordermain">
          <!--全部展示-->

          <div class="orderpage fixtop">
            <!--待确认-->
            <div class="order_main1">
              <a class="ormain1">
                <span class="orchef">租车费用：<span>待定</span></span>
                <span class="orstatu">预约中</span>
              </a>
              <a href="order_yxzxq.html" class="ormain2 houjiantou3">
                <div class="cfsj"><img src="./images/order1.png" />租车时间：2018-08-28 13:00——2018-...</div>
                <div class="cdd"><img src="./images/fp2.png" />所租车型：新BMW 4系敞篷轿跑车</div>
                <div class="cfmd"><img src="./images/fp1.png" />带司机：不带司机</div>
              </a>
              <div class="ormain3">

                <span class="edit orderbgcolor"><a href="javascript:; " style="color: white;">修改订单</a></span>
                <span class="quxiaoorder_daiquren">取消订单</span>
              </div>
            </div>
            <!--待支付-->
            <div class="order_main1">
              <a class="ormain1">
                <span class="orchef">租车费用<span>￥1200</span></span>
                <span class="orstatu">待支付</span>
              </a>
              <a href="order_Dzfxq.html" class="ormain2 houjiantou3">
                <div class="cfsj"><img src="./images/order1.png" />租车时间：2018-08-28 13:00——2018-...</div>
                <div class="cdd"><img src="./images/fp2.png" />所租车型：新BMW 4系敞篷轿跑车</div>
                <div class="cfmd"><img src="./images/fp1.png" />带司机：带司机</div>
              </a>
              <div class="ormain3">
                <span class="quzhifu orderbgcolor"><a style="color: white;" href="WeiXin_xzzffs.html">去支付</a></span>
                <span class="quxiaoorder_daizhifu">取消订单</span>
              </div>
            </div>
            <!--待出发-->
            <div class="order_main1">
              <a class="ormain1">
                <span class="orchef">租车费用:<span>￥1200</span></span>
                <span class="orstatu">待出发</span>
              </a>
              <a href="order_Dcfxq.html" class="ormain2 houjiantou3">
                <div class="cfsj"><img src="./images/order1.png" />租车时间：2018-08-28 13:00——2018-...</div>
                <div class="cdd"><img src="./images/fp2.png" />所租车型：新BMW 4系敞篷轿跑车</div>
                <div class="cfmd"><img src="./images/fp1.png" />带司机：不带司机</div>
              </a>
              <div class="ormain3">
                <span class="chakandingdan orderbgcolor"><a style="color: white;" href="javascript:;">修改订单</a></span>
                <span class="quxiaoorder_daichufa">取消订单</span>
              </div>
            </div>
            <!--进行中-->
            <div class="order_main1">
              <a class="ormain1">
                <span class="orchef">租车费用:<span>￥1200</span></span>
                <span class="orstatu">进行中</span>
              </a>
              <a href="order_Jxzxq.html" class="ormain2 houjiantou3">
                <div class="cfsj"><img src="./images/order1.png" />租车时间：2018-08-28 13:00——2018-...</div>
                <div class="cdd"><img src="./images/fp2.png" />所租车型：新BMW 4系敞篷轿跑车</div>
                <div class="cfmd"><img src="./images/fp1.png" />带司机：不带司机</div>
              </a>
              <!-- <div class="ormain3">
                <span id="chakanhetong" class="orderbgcolor"><a style="color: white;" href="TheContract.html">查看合同</a></span>
                <span id="querendingdan" class="orderbgcolor"><a style="color: white;" href="SureOrder.html">确认订单</a></span>
              </div> -->
            </div>
            <!--已完成  未评价-->
            <div class="order_main1">
              <a class="ormain1">
                <span class="orchef">租车费用:<span>￥1200</span></span>
                <span class="orstatu">已完成</span>
              </a>
              <a href="order_Ywcxq.html" class="ormain2 houjiantou3">
                <div class="cfsj"><img src="./images/order1.png" />租车时间：2018-08-28 13:00——2018-...</div>
                <div class="cdd"><img src="./images/fp2.png" />所租车型：新BMW 4系敞篷轿跑车</div>
                <div class="cfmd"><img src="./images/fp1.png" />带司机：不带司机</div>
              </a>
              <div class="ormain3">
                <span class="querendingdan orderbgcolor"><a style="color: white;" href="Order_pingjia.html">评价订单</a></span>
                <span class="shanchuorder_yiwancheng">删除订单</span>
              </div>
            </div>
            <!--已完成  已评价-->
            <div class="order_main1">
              <a class="ormain1">
                <span class="orchef">租车费用:<span>￥1200</span></span>
                <span class="orstatu">已完成</span>
              </a>
              <a href="order_Ywcxq.html" class="ormain2 houjiantou3">
                <div class="cfsj"><img src="./images/order1.png" />租车时间：2018-08-28 13:00——2018-...</div>
                <div class="cdd"><img src="./images/fp2.png" />所租车型：新BMW 4系敞篷轿跑车</div>
                <div class="cfmd"><img src="./images/fp1.png" />带司机：不带司机</div>
              </a>
              <div class="ormain3">
                <span class="chakanhetong orderbgcolor"><a style="color: white;" href="TheContract.html">查看合同</a></span>
                <span class="querendingdan orderbgcolor"><a style="color: white;" href="Order_pingjia.html">评价订单</a></span>
                <span class="shanchuorder_yiwancheng">删除订单</span>
              </div>
            </div>
            <!--订单取消-->
            <div class="order_main1">
              <a class="ormain1">
                <span class="orchef">租车费用:<span>￥1200</span></span>
                <span class="orstatu">已取消</span>
              </a>
              <a href="order_Orderqxxq.html" class="ormain2 houjiantou3">
                <div class="cfsj"><img src="./images/order1.png" />租车时间：2018-08-28 13:00——2018-...</div>
                <div class="cdd"><img src="./images/fp2.png" />所租车型：新BMW 4系敞篷轿跑车</div>
                <div class="cfmd"><img src="./images/fp1.png" />带司机：不带司机</div>
              </a>
              <div class="ormain3">
                <span class="shanchuorder_dingdanshanchu">删除订单</span>
              </div>
            </div>
            <!-- 退款中 -->
            <div class="order_main1">
              <a class="ormain1">
                <span class="orchef">租车费用:<span>￥1200</span></span>
                <span class="orstatu">退款中</span>
              </a>
              <a href="order_tkzxq.html" class="ormain2 houjiantou3">
                <div class="cfsj"><img src="./images/order1.png" />租车时间：2018-08-28 13:00——2018-...</div>
                <div class="cdd"><img src="./images/fp2.png" />所租车型：新BMW 4系敞篷轿跑车</div>
                <div class="cfmd"><img src="./images/fp1.png" />带司机：不带司机</div>
              </a>
            </div>
            <!-- 已退款 -->
            <div class="order_main1">
              <a class="ormain1">
                <span class="orchef">租车费用:<span>￥1200</span></span>
                <span class="orstatu">已退款</span>
              </a>
              <a href="order_ytkxq.html" class="ormain2 houjiantou3">
                <div class="cfsj"><img src="./images/order1.png" />租车时间：2018-08-28 13:00——2018-...</div>
                <div class="cdd"><img src="./images/fp2.png" />所租车型：新BMW 4系敞篷轿跑车</div>
                <div class="cfmd"><img src="./images/fp1.png" />带司机：不带司机</div>
              </a>
              <div class="ormain3">
                <span class="shanchuorder_dingdanshanchu">删除订单</span>
              </div>
            </div>
          </div>
          <!--待支付-->
          <div class="orderpage hide fixtop">
            <!--无订单的状态-->
            <div>
              <div class="noneorderimg"><img src="./images/order2.png" /></div>
              <div class="noneordertxt">您还没有相关订单</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </body>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/rem.js"></script>
  <script src="./js/swiper.min.js"></script>
  <!--弹框-->
  <script type="text/javascript" src="./js/tc/zepto.min.js"></script>
  <script>
    //			初始化swiper
    var swiper1 = new Swiper('.swiper1', {
      slidesPerView: 4.5,
      paginationClickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
      spaceBetween: 10, //slide之间的距离（单位px）。
      freeMode: true, //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
      loop: false, //是否可循环
      onTab: function (swiper) {
        var n = swiper1.clickedIndex;
      }
    });
    //			头部tab切换
    $(".swiper-wrapper .swiper-slide").on("click ", function () {
      $(".swiper-wrapper .swiper-slide").removeClass("selected ");
      $(this).addClass("selected ");
      var index = $(this).index();
      $(".ordermain ").children(".orderpage ").hide();
      $(".ordermain ").children(".orderpage ").eq(index).show();
    });
    $(".quxiaoorder_daiquren").click(function () {
      var _this = $(this);
      $.confirm("亲,您真的要取消本次订单吗?", "温馨提示", function () {
        $.toast("订单已取消!");
        //		            var this1 = $(".quxiaoorder_daiquren");
        _this.parent().parent().remove();
      }, function () {
        //取消操作
      });
    })
    //待支付取消订单 弹框
    $(".quxiaoorder_daizhifu").click(function () {
      var _this = $(this);
      $.confirm("亲,您真的要取消本次订单吗?", "温馨提示", function () {
        $.toast("订单已取消!");
        //		           var this1 = $(".quxiaoorder_daizhifu");
        _this.parent().parent().remove();
      }, function () {
        //取消操作
      });
    })
    //待出发取消订单 弹框
    $(".quxiaoorder_daichufa").click(function () {
      var _this = $(this);
      $.confirm("亲，您真的要取消本次订单吗？用车前48小时外取消订单将全额退款，用车前48小时内取消订单，将收取20%违约金。", "温馨提示", function () {
        $.toast("订单已取消!");
        _this.parent().parent().remove();
      }, function () {
        //取消操作
      });
    })

    //进行中确认订单orderbgcolor1
    $(".orderbgcolor1").click(function () {
      var _this = $(this);
      $.confirm(" 亲，您确认行程已完成了吗？", "确认订单", function () {
        $.toast("订单已确认!");
        //		           var this1 = $(".quxiaoorder_daichufa");
        //		           _this.parent().parent().remove();
        location.href = "SureOrder.html";
      }, function () {
        //取消操作
      });
    })
    //已完成  删除订单 弹框
    $(".shanchuorder_yiwancheng").click(function () {
      var _this = $(this);
      $.confirm("亲，您真的要删除本次订单吗？", "温馨提示", function () {
        $.toast("订单已删除!");
        //		           var this1 = $(".shanchuorder_yiwancheng");
        _this.parent().parent().remove();
      }, function () {
        //取消操作
      });
    })
    //订单取消  删除订单 弹框 shanchuorder_dingdanshanchu
    $(".shanchuorder_dingdanshanchu").click(function () {
      var _this = $(this);
      $.confirm("亲，您真的要删除本次订单吗？", "温馨提示", function () {
        $.toast("订单已删除!");
        //		           var this1 = $(".shanchuorder_dingdanshanchu");
        _this.parent().parent().remove();
      }, function () {
        //取消操作
      });
    })
  </script>

</html>